<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<view class="nav-bar">
			<view class="status-bar" ></view>
			<view class="nav-content">
				<view class="nav-left" @click="goBack">
					<u-icon name="arrow-left" color="#333" size="18"></u-icon>
				</view>
				<view class="nav-title">小地块名称</view>
				<view class="nav-right"></view>
			</view>
		</view>
	
		<view class="seed-card" v-for="(item,index) in seedList" :key="index">
			<image class="seed-img" :src="item.cropImg" mode="aspectFill"></image>
			<view class="seed-info">
				<view class="seed-title">{{ item.cropName }}</view>
				<view class="seed-desc">最低种植：{{item.cropArea}}m²；预计产量：{{item.cropProduction}}kg/m²</view>
				<view class="seed-bottom">
					<view class="seed-price">￥{{ item.cropPrice }}</view>
					<view class="seed-counter">
						<text class="counter-btn" @click="subCropNum(item)">－</text>
						<input 
							class="counter-num" 
							v-model="item.cropNum" 
							type="number" 
							:min="0"
							:max="totalArea - selectedArea + item.cropNum"
							@input="handleCropNumInput($event, item)"
							placeholder= 0
						/>
						<text class="counter-btn" @click="addCropNum(item)">＋</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="bottom-bar">
			<view class="area-info">
				<view>
					<text>剩余土地:</text>
					<text>{{ totalArea - selectedArea }}m²</text>
				</view>
				<view>
					<text>已选:</text>
					<text>{{ selectedArea }}</text>
					<text>/{{ totalArea }}m², 总计:</text>
					<text style="color:#e53935;">{{ totalPrice.toFixed(2) }}元</text>
				</view>
			</view>
			<button class="confirm-btn" @click="confirmSelect">确认</button>
		</view>




		
	</view>
</template>

<script>
import request from 'util/request.js'
	export default {
		data() {
			return {
				fieldInfo:{},
				//记录剩余可播种的地块面积
				totalArea:10,
				//记录已选择播种的地块面积
				selectedArea:0,
				seedList:[],
				selectedSeedList:[],
				fieldOrder:{},
				totalPrice:0,
				
			}
		},
		methods: {
		
			//输入框输入事件
			handleCropNumInput(event, item){
				// let cropNum = item.cropNum;
				// console.log(event, item)
				let inputValue = Number(event.detail.value)
				console.log(inputValue)
				console.log(this.selectedArea)
				console.log(this.totalArea)
				if(inputValue + this.selectedArea-Math.floor(inputValue / 10) > this.totalArea || inputValue<item.cropArea){
					uni.showToast({
						title:'输入数量不能大于剩余数量',
						icon:'none'
					})
					//返回到上次输入的内容
					// let afterInputValue = Math.floor(inputValue / 10) ;
					item.cropNum = 0;
					//计算剩余可播种面积
				this.selectedArea = this.seedList.reduce((sum, item) => sum + (Number(item.cropNum) || 0), 0);
				// //计算总价格
				// this.totalPrice =  this.seedList.reduce((sum, item) => sum + (Number(item.cropNum)*item.cropPrice || 0), 0);
					return
				}
				//计算剩余可播种面积
				this.selectedArea = this.seedList.reduce((sum, item) => sum + (Number(item.cropNum) || 0), 0);
				//计算总价格
				this.totalPrice =  this.seedList.reduce((sum, item) => sum + (Number(item.cropNum)*item.cropPrice || 0), 0);
				
			},
			//确认按钮点击事件
			confirmSelect(){
				this.selectedSeedList = this.seedList.filter(item => item.cropNum > 0);
				uni.setStorageSync('seedToOrder',{seedList:this.selectedSeedList,selectedArea:this.selectedArea,totalPrice:this.totalPrice} )
				uni.setStorageSync('fieldInfo',this.fieldInfo)
				uni.setStorageSync('plotOrderNum',this.fieldOrder.plotOrderNum)
				// uni.navigateBack({
				// 	delta: 1
				// });	
				uni.redirectTo({
					url: '/pages/farm/fieldOrder'
				})
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			addCropNum(item){
				// console.log(item, "addCropNum")
				if(item.cropNum ==0){
					if(this.selectedArea + item.cropArea > this.totalArea){
						uni.showToast({
							title: '剩余可播种面积不足',
							icon: 'none'
						});
						return;
					}
					item.cropNum = item.cropArea;
					this.totalPrice +=item.cropPrice*item.cropArea;
					this.selectedArea += item.cropArea;
				}
				else{
					if(this.selectedArea  == this.totalArea){
						uni.showToast({
							title: '剩余可播种面积不足',
							icon: 'none'
						});
						return;
					}
					item.cropNum ++;
					this.totalPrice +=item.cropPrice;
					this.selectedArea ++;
				}
				
			},
			subCropNum(item){
				if(item.cropNum == 0){
						uni.showToast({
							title: '已播种面积不足',
							icon: 'none'
						});
						return;
				}
				//当前订购面积等于最低播种面积
				if(item.cropNum ==item.cropArea){
					
					item.cropNum=0;
					this.selectedArea -= item.cropArea;
					this.totalPrice -=item.cropPrice*item.cropArea;
				}else{
					//当前订购面积大于最低播种面积
					
					item.cropNum --;
					this.selectedArea --;
					this.totalPrice -=item.cropPrice;
				}
			}
			
		},
		mounted(){
			//获取种子列表
			this.fieldOrder = uni.getStorageSync('fieldOrder');
			this.seedList = this.fieldOrder.seedList.map(item => ({
				...item,
				cropNum: 0
			}));
			this.fieldInfo = uni.getStorageSync('fieldInfo');
			console.log(this.seedList, "seedList")
			// this.fieldInfo = uni.getStorageSync('fieldInfo');
			this.totalArea = this.fieldOrder.plotArea
		
		},
		computed: {
			// selectedArea() {
			// 	return this.seedList.reduce((sum, seed) => sum + (Number(seed.cropNum) || 0), 0);
			// },
			// totalPrice() {
			// 	return this.seedList.reduce((sum, seed) => sum + (Number(seed.cropNum) * Number(seed.cropPrice) || 0), 0);
			// }	
		}	
	}	
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}
	/* 自定义导航栏 */
	.nav-bar {
		background-color: #4CAF50;
		border-bottom: 1rpx solid #f0f0f0;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}
	
	.status-bar {
		width: 100%;
		background-color: #4CAF50;
	}
	
	.nav-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 30rpx;
		background-color: #4CAF50;
	}
	
	.nav-left {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}
	
	.nav-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
		text-align: center;
		flex: 1;
	}
	
	.nav-right {
		width: 60rpx;
		flex-shrink: 0;
	}
	.seedItem{
		height: 20vh;
		background-color: #fff;
		border-radius: 18rpx;
		/* box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04); */
		/* margin: 10rpx 30rpx; */
		padding: 32rpx 28rpx 18rpx 28rpx;
	}
	.seed-card {
		height: 150rpx;
		display: flex;
		background: #fff;
		border-radius: 16rpx;
		padding:30rpx;
		margin: 16rpx;
		align-items: center;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
	}
	.seed-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 12rpx;
		margin-right: 24rpx;
		object-fit: cover;
	}
	.seed-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 120rpx;
	}
	.seed-title {
		font-size: 36rpx;
		font-weight: bold;
		/* margin-top: 8rpx; */
	}
	.seed-desc {
		color: #999;
		font-size: 26rpx;
		/* margin-bottom: 16rpx; */
	}
	.seed-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.seed-price {
		color: #ff2d2d;
		font-size: 32rpx;
		font-weight: bold;
	}
	.seed-counter {
		display: flex;
		align-items: center;
	}
	.counter-btn {
		font-size: 48rpx;
		color: #222;
		width: 48rpx;
		text-align: center;
		line-height: 48rpx;
		user-select: none;
	}
	.counter-num {
		font-size: 32rpx;
		margin: 0 16rpx;
	}
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fff;
		box-shadow: 0 -2rpx 8rpx #eee;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		z-index: 100;
	}
	.area-info {
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 28rpx;
		color: #666;
	}
	.confirm-btn {
		background: #4CAF50;
		color: #fff;
		font-size: 32rpx;
		border-radius: 50rpx;
		padding: 0 60rpx;
		height: 70rpx;
		line-height: 70rpx;
	}
</style>
